<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>又拍云 - 文件列表</title>
    <link rel="stylesheet" href="//mirror.fe80.cn/layui/2.6.8/css/layui.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <script src="https://mirror.fe80.cn/clipboard.js/2.0.11/clipboard.min.js"></script>
</head>
<body>
    <div id="app306">
        <div class="f-top f-hide">
            列表标题
            <a href="javascript:alert('测试中')" class="f-top-right">
                右侧操作
            </a>
        </div>

        <div class="f-top">
            <div class="f-top-left">
                <a class="f-top-left-a" href="/index.html">
                    <i>&#xe60c;</i> 返回上级
                </a>

                <div class="f-top-bread">
                    <a href="/index.html">首页</a> &nbsp;>&nbsp; 文件中心
                </div>

                <!-- <div class="f-top-menu">
                    <span class="f-btn">编辑</span>
                    <span class="f-btn">设为默认律所</span>
                    <span class="f-btn">删除</span>
                    <span class="f-btn">律师管理</span>
                </div> -->

                <a href="javascript:alert('测试中')" class="f-top-right">
                    添加文件
                </a>
            </div>
        </div>

        <div class="f-container">
            <table class="f-table">
                <thead>
                    <tr>
                        <th>编号</th> <th>文件名称</th> <th>时间</th> <th>大小</th> <th>操作</th>
                    </tr>
                </thead>
                <tbody id="cdata"> </tbody>
            </table>
        </div>
    </div>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="/static/js/global.js"></script>
<script>
var path = '/res/';
var filedomain = domain.upyun;
var api = domain.api + '/tools/sdk/upyun.html';
var push = {method:'read',read:path};

layui.use(['form'],function(){
    var $ = layui.$;
    $.post(api,push,function(res){
        renderList(res.read.files,push.read);
    });
    
    var obj = new ClipboardJS('.f-btn');
    obj.on('success', function(e) {
        $(e.trigger).css({'color':'#f00'});
    });

    $.get('http://cdn.fe80.cn/download/upload.json',function(res){
        for (var i = 0; i < res.length; i++) {
            res[i].name = res[i].Name;
            res[i].time = res[i].Time.replace(/T/,' ').replace('+08:00','');
            res[i].size = res[i].Size;
            res[i].type = "N";
        }
        renderList(res,'/download/');
    });
})

function renderList(il,path = ''){
    var d = document.getElementById('cdata');
    var _html = '';
    for (var i = 0; i < il.length; i++) {
        if(il[i].type == 'N'){
            _html += '<tr>'+
                '<td><span class="type_class">'+(i + 1)+'</span></td>'+
                '<td>'+il[i].name+'</td>'+
                '<td>'+il[i].time+'</td>'+
                '<td>'+formatSize(il[i].size)+'</td>'+
                '<td dataid="'+i+'">'+
                    '<a class="f-btn f-btn-blue" href="'+filedomain + path + il[i].name+'">下载</a>'+
                    '<span class="f-btn" data-clipboard-text="'+filedomain + path + il[i].name+'">复制</span>'+
                '</td>'+
            '</tr>';
        }
    }
    d.innerHTML += _html;
}
// Js把字节转为对应字节单位
function formatSize(bytes) {
    if (bytes === 0) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let i = 0;
    for (i; bytes >= 1024 && i < units.length - 1; i++) {
        bytes /= 1024;
    }
    return bytes.toFixed(3) +' '+ units[i];
}
</script>
</html>
